﻿@charset "utf-8";
/* CSS Document */
@font-face
{
font-family: myFirstFont;
src: url('../font/fonts.otf');
}

div
{
font-family:myFirstFont;
}

*{ margin:0; padding:0; font-family:myFirstFont,Hiragino Sans GB,Driod Sans Fallback,Microsoft YaHei,Helvetica,'黑体';-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;}
html { overflow-x:hidden; font-family:myFirstFont,Hiragino Sans GB,Driod Sans Fallback,Microsoft YaHei,'黑体';}
body { font-size:100px; color:#474843; background:#fff; font-family:myFirstFont,Hiragino Sans GB,Driod Sans Fallback,Microsoft YaHei,'黑体';-webkit-text-size-adjust: 100% !important;}

#all{ width:100%; height:100%; max-width:750px; position:fixed; left:0; top:0; overflow:hidden; font-size:50%; background: url(../images/page1_bg.png) no-repeat 0 0 #ff9900; background-size: 100% 100%;}
#all>div{ font-size:1em}
img{ width:100%; display:block;}
ul,li{ list-style:none;}
input,select{-webkit-appearance: none; }

/*a 链接*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #fff; font-family:myFirstFont,Hiragino Sans GB,Driod Sans Fallback,Microsoft YaHei,Helvetica,'黑体';}

a{ text-decoration:none; outline:none; background-color:rgba(255,255,255,0); -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none;-webkit-user-select:none;-webkit-appearance: none;}
a:link,div:link,li{ -webkit-tap-highlight-color:rgba(0,0,0,0);}
a:visited,div:visited { -webkit-tap-highlight-color:rgba(0,0,0,0);}
a:hover, a:active, a:focus { -webkit-tap-highlight-color:rgba(0,0,0,0);}
*:link{ -webkit-tap-highlight-color:rgba(0,0,0,0);}

.nav{ width:100%; height: 1em; position: absolute;left: 0; top: 1.9%;background: url(../images/page_btn.png) no-repeat 0 0; background-size: 100% 100%;}
.nav a{ width:33.33%; height: 1em; float: left; display: block;}

#page1{ width:100%; height: 100%; position:absolute; left: 0; top: 0;}
.page1_1{ width:100%; position: absolute; left: 0; top: 13%;}
#page1 .page1_1{-webkit-animation:pulse 1s 0s ease both;}
.btn1{ width:3.5em; position: absolute; left: 50%; top:78%; margin-left: -1.75em;}
.btn2{ width:3.5em; position: absolute; left: 50%; top:88%; margin-left: -1.75em;}
.btn3{ width:3.5em; position: absolute; left: 50%; top:87%; margin-left: -1.75em;}
.btn4{ width:3.5em; position: absolute; left: 50%; top:88%; margin-left: -1.75em;}
.btn5{ width:3.5em; position: absolute; left: 50%; top:78%; margin-left: -1.75em;}

.success_btn2{ width:3.5em; position: absolute; left: 50%; top:68%; margin-left: -1.75em;}

.btn1 i,.btn2 i,.btn3 i,.btn4 i,.btn5 i{ width:0.95em; position: absolute; left: 100%; top: -0.73em; display: block; -webkit-animation:jiantou 1s 0s linear both infinite;}
@-webkit-keyframes jiantou{
0%{ -webkit-transform:translateX(-10px)}
50%{ -webkit-transform:translateX(0)}
100%{ -webkit-transform:translateX(-10px)}
}

#list{ display:none;}
.timu_tit{ width:1.78em; height: 1.25em; position: absolute;left: 0; top: 11%; background: url(../images/timu_tit.png) no-repeat 0 0; background-size: 100% 100%;}
.timu_tit p{ font-size:0.48em; color: #5a3d12; line-height: 2.6em; text-indent: 0.4em;}

.next{ width:3.5em; position: absolute; left: 50%; top:72%; margin-left: -1.75em; display: none;}
.wancheng{ width:3.5em; position: absolute; left: 50%; top:72%; margin-left: -1.75em; display: none;}

.timu_list{ width:6.3em; position: absolute; left: 0.6em; top: 15.2%; background: url(../images/timu_bg.png) no-repeat 0 0; background-size: 100% 100%; padding:0 0 0.5em 0.17em;}
.timu_list dl{ display:none;}
.timu_list dl:first-child{ display:block}
.timu_list dt{ font-size:0.4em; line-height: 1.36em; padding: 1em 1em; text-indent: 1.6em;}
.timu_list dd{ width: 4.62em;  margin: 0.1em auto 0 auto;}
.timu_list dd a{ width:100%; height: 0.8em; margin-bottom: 0.4em; display: block; background: url(../images/timu_1.png) no-repeat 0 0; background-size: 100% 100%; color: #39270c; position: relative;} 
.timu_list dd p{ font-size: 0.27em; line-height:2.5em; text-indent: 1.1em;}
.timu_list dd a.cur1{ background: url(../images/timu_2.png) no-repeat 0 0; background-size: 100% 100%;}
.timu_list dd a.cur2{ background: url(../images/timu_3.png) no-repeat 0 0; background-size: 100% 100%;}
.timu_list dd a i{ width:0.77em; position: absolute; right: -0.4em; top: -0.36em;}

#guize{ width:6.3em; position: absolute; left: 0.6em; top: 17%; background: url(../images/guize_bg.png) no-repeat 0 0; background-size: 100% 100%; padding:0 0 0.6em 0.17em; display: none;z-index:9999}
.guize_tit{ width:3.24em; position: absolute;left: 1.53em;top:-0.6em;}
.guize_div{ width:5.4em; margin: 1em auto 0 auto; color: #541320;}
.guize_div div{font-size: 0.27em; line-height: 1.7em;}

#jiangpin{ width:6.3em; height: 5.4em; position: absolute; left: 0.6em; top: 20%; background: url(../images/guize_bg.png) no-repeat 0 0; background-size: 100% 100%; padding-left: 0.17em; display: none;z-index:9999}
.jiangpin_list{ width: 4.62em;  margin: 1.22em auto 0 auto;}
.jiangpin_list a{ width:100%; height: 0.8em; margin-bottom: 0.36em; display: block; background: url(../images/jiangpin_list.png) no-repeat 0 0; background-size: 100% 100%; color: #39270c;}
.jiangpin_list p{ font-size: 0.36em; line-height: 1.9em; text-align: center;}

.off{ width:0.77em; height: 0.77em; position: absolute; right: -0.22em; top: -0.34em; background: url(../images/timu_cuo.png) no-repeat 0 0; background-size: 100% 100%;}

#guanzhu{ width:6.68em; height: 6.61em; position: absolute; left: 0.38em; top:18%; background: url(../images/guanzhu.png) no-repeat 0 0; background-size: 100% 100%; display: none;}
#guanzhu img{ width:2.6em; padding: 0.05em; border: 2px solid #000; border-radius: 0.2em; margin:1.06em auto 0 auto; background: #fff;}
#guanzhu div{ font-size:0.36em; line-height: 1.4em; text-align: center; color: #541320; margin-top: 0.6em;}
#guanzhu .off{ right:0.72em; top:0.32em;}


#fenx{ width:100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7); display: none;}
#fenx a{ width:100%; height: 100%; position: absolute; left: 0; top: 0; display: block;}


#haoyou{ display:none;}
.hy_div{ width:5.52em; height: 5.49em; position: absolute; left: 0.91em; top: 20%; background: url(../images/haoyou_bg.png) no-repeat 0 0; background-size: 100% 100%;}
.hy_div ul{ width:100%; height: 100%; position: absolute; left: 0; top: 0;}
.hy_div li{ width:1.61em; height: 1.56em; position: absolute; background: url(../images/haoyou_img.png) no-repeat 0 0; background-size: 100% 100%;}
.hy_div li img{ width:1.44em; height: 1.44em; position: absolute; left: 0.13em; top: 0.05em; border-radius: 100%;}
.hy_div li:nth-child(1){ left: 2.02em; top: -0.75em;}
.hy_div li:nth-child(2){ left: 2.02em; top: 4.5em;}
.hy_div li:nth-child(3){ left: 4.62em; top: 1em;}
.hy_div li:nth-child(4){ left: 0.34em; top: 4.06em;}
.hy_div li:nth-child(5){ right: 0.34em; top: 4.06em;}

.hy_text{ text-align: center; margin-top: 1.5em;}
.hy_text span{ font-size:0.67em; display: block; color: #e43256;}
.hy_text p{ font-size:0.8em; color: #541320;}



#dhm{ width:6.3em; position: absolute; left: 0.6em; top: 17%; background: url(../images/guize_bg.png) no-repeat 0 0; background-size: 100% 100%; padding:0 0 0.5em 0.17em; display: none;z-index:9999}
.dhm_text1 img{ width:2.6em; padding: 0.05em; border: 2px solid #000; border-radius: 0.2em; margin:0.9em auto 0 auto; background: #fff;}
.dhm_text1 p{ font-size:0.30em; line-height: 1.4em; text-align: center; color: #541320; margin-top: 0.6em;}
.dhm_text2{ font-size:0.48em; line-height: 1.4em; text-align: center; color: #541320; margin-top: 0.6em;}



#success{ width: 6.3em; height: 6.23em; position: absolute; left: 0.57em; top: 19.8%; background: url(../images/guanzhu.png) no-repeat 0 0; background-size: 100% 100%; display: none;}
#success2{ width: 6.3em; height: 6.23em; position: absolute; left: 0.57em; top: 19.8%; background: url(../images/guanzhu.png) no-repeat 0 0; background-size: 100% 100%; display: none;}
.success_text{ text-align:center; margin-top: 1.12em;}
.success_text span{ font-size: 1.46em; line-height: 1.1em; color: #ed4040;}
.success_text p{ font-size: 0.73em; line-height: 1.1em; color: #541320;}
.success_btn{ width:3.5em; margin: 0.6em auto 0  auto;}
#success .off{ right:0.72em; top:0.32em;}


#shibai{ width: 6.3em; height: 6.23em; position: absolute; left: 0.57em; top: 19.8%; background: url(../images/guanzhu.png) no-repeat 0 0; background-size: 100% 100%; display: none;}
.success2_text{ text-align:center; margin-top: 1.12em;}
.success2_text span{ font-size: 1.46em; line-height: 1.1em; color: #ed4040;}
.success2_text p{ font-size: 0.43em; line-height: 1.1em; color: #541320;}
.success2_btn{ width:3.5em; margin: 0.6em auto 0  auto;}
#shibai .off{ right:0.72em; top:0.32em;}




#yzm{ width: 6.3em; height: 6.23em; position: absolute; left: 0.57em; top: 19.8%; background: url(../images/guanzhu.png) no-repeat 0 0; background-size: 100% 100%; padding-top: 1.5em; display: none;}
#yzm .off{ right:0.72em; top:0.32em;}
#yzm dl{ width: 5em; margin: 0.18em auto 0 auto; overflow: hidden;}
#yzm dt{ width:1.7em; float: left;}
#yzm dt p{ font-size:0.48em; line-height: 1.6666em; text-align: right;}
#yzm dd{ width:3.2em; float: left; overflow: hidden;}
#yzm dd input{ width:100%; height: 2.222em; font-size: 0.36em; display: block;}

#yzm .phone input{ background: url(../images/icon_phone.png) no-repeat 0 0; background-size: 100% 100%; border: 0; border-radius: 0; padding: 0 0.5em; padding-bottom: 0.2em;}
#yzm .yzm input{ width:4.83em; background: url(../images/icon_yzm.png) no-repeat 0 0; background-size: 100% 100%; border: 0; border-radius: 0; padding: 0 0.5em; float: left; padding-bottom: 0.2em;}

#yzm dd div{ width:4.2em;font-size:0.32em; float: right; text-align: center; height: 2.5em; line-height: 2.2em; background: url(../images/icon_yzmbtn.png) no-repeat 0 0; background-size: 100% 100%;}
#yzm dd div a{ color:#39270c; display: block;}
#yzm dd div span{ display:none;}

#yzm input[type='button']{ width:3.5em; display: block; height: 0.97em; font-size: 1em; background: url(../images/tijiao.png) no-repeat 0 0; background-size: 100% 100%; border:0; box-shadow: o; border-radius: 0; display: block; margin: 0.76em auto 0 auto;}


#page0{ width:100%; height: 100%; position:absolute; left: 0; top: 0; display: none;}
.page0_bg{ width:100%; height: 100%; position:absolute; left: 0; top: 0;}
.page0_bg img{ height:100%;}
.page0_text{ width:2.22em; position: absolute; right: 0.35em; top: 0.97em;}
.page0_btn{ width: 3.93em; position: absolute; left: 1.85em; bottom: 0.61em;}

#page0 .page0_text{-webkit-animation:lefts 1s 1.5s ease both;}
#page0 .page0_btnaaa{-webkit-animation:topUp 1s 1.5s ease both;}

.page0_btns{ width:100%; height: 100%; position: absolute; left: 0; top: 0;}
.page0_btns a{ width:2.8em; height: 16.3%; position: absolute; display: block; background: url(http://zhangyuefeng.oss-cn-hangzhou.aliyuncs.com/pocky/images/plays.png) no-repeat 0 center; background-size: 200% auto;}
.page0_btns a.btn1{ left:4.4em; top: 26.5%;}
.page0_btns a.btn2{ left:4.1em; top: 42.8%;}
.page0_btns a.btn3{ left:4.7em; top: 58.7%;}
.page0_btns a.btn4{ left:4.2em; top: 75.4%;}
.page0_btns a.cur{ background: url(http://zhangyuefeng.oss-cn-hangzhou.aliyuncs.com/pocky/images/plays.png) no-repeat 100% center; background-size: 200% auto;}

.page0_btns.cur a.btn1{ top: 28%;}
.page0_btns.cur a.btn2{ top: 42.8%;}
.page0_btns.cur a.btn3{ top: 58%;}
.page0_btns.cur a.btn4{ top: 73%;}

.page0_btns.cur2 a.btn1{ top: 33%;}
.page0_btns.cur2 a.btn2{ top: 46.8%;}
.page0_btns.cur2 a.btn3{ top: 61.5%;}
.page0_btns.cur2 a.btn4{ top: 74%;}



.bg{ width:100%; height: 100%; position: absolute;left: 0; top: 0;}
.bg img{ width:100%; height:100%; position: absolute; left: 0; top: 0; display: none;}
.bg img:first-child{ display: block;}

#zhe{ width:100%; height: 100%; position: absolute; left: 0; top: 0;}

.pocky_music{ width:100%; height: 100%; position: absolute; left: 0; top: 0;}

.people{ width:100%; height: 4.25em; position: absolute; left: 1rem; bottom: 0; }
.star{ width:100%; height: 4.25em; position: absolute; left: 1rem; bottom: 0; }
.star img{ width:100%; height: 4.25em; position: absolute; left: 0; bottom: 0; }

.guang{ width:100%; height: 100%; position: absolute; left: 0; top: 0; background: url(http://zhangyuefeng.oss-cn-hangzhou.aliyuncs.com/pocky/images/guang3.png) no-repeat center center; background-size: 0;}

.guang.cur{-webkit-animation:guang 1.5s 0s ease-in both;}
@-webkit-keyframes guang{
0%{ background-size: 0% auto;}
100%{ background-size: 6000% auto;}
}


.page1_text{ width:1em; position: absolute; right: 0.18em; top: 0;}
.page1_text img{ display:none;}
.page1_text img:first-child{ display:block;}
.page1_text img{-webkit-animation:bottoms 1s 0s ease both;}


#page1 .star img:nth-child(1){-webkit-animation:shan 2s 0s ease both infinite;}
#page1 .star img:nth-child(2){-webkit-animation:shan 2s .5s ease both infinite;}
#page1 .star img:nth-child(3){-webkit-animation:shan 2s 1s ease both infinite;}
#page1 .star img:nth-child(4){-webkit-animation:shan 2s 1.5s ease both infinite;}
@-webkit-keyframes shan{
0%{opacity:.3;}
50%{opacity:1;}
100%{opacity:.3;}
}

#page1 .pocky_music{ -webkit-animation: heart-burst steps(8) 1s infinite both;}

@-webkit-keyframes heart-burst {
0%{ background-position: 0%;}
100%{ background-position: 100%;}
}

.pocky_hezi,.pocky_yinying{ width:100%; height: 38%; position: absolute; left: 1rem; bottom: 0;}
.pocky_hezi img,.pocky_yinying img{ height:100%;}

.tishi{ width:100%; position: absolute; left: 0; bottom: 0;}
#page1 .tishi{-webkit-animation:tishi 1s 0s linear both infinite;}
@-webkit-keyframes tishi{
0%{ -webkit-transform:translateX(-10px)}
50%{ -webkit-transform:translateX(0)}
100%{ -webkit-transform:translateX(-10px)}
}

.shouzhi{ width:1.5em;position: absolute; left: 20%; bottom: 19%;}
.datixiaotieshi {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0%;
}
#page1 .shouzhi{-webkit-animation:shouzhi 1.5s 0s linear both infinite;}
@-webkit-keyframes shouzhi{
0%{ -webkit-transform:translateY(0)}
50%{ -webkit-transform:translateY(-60px)}
100%{ -webkit-transform:translateY(0)}
}


.pocky{ width:5%; position: absolute; left: 35%; bottom: 1.3em; opacity: 0;}
.pocky div{ background: url(http://zhangyuefeng.oss-cn-hangzhou.aliyuncs.com/pocky/images/pocky.png) no-repeat 0 0; background-size: 100% 100%;}
.pocky img{ opacity:.3;}

.icon_left{ width:0.8em; position: absolute; left: 0; top: 40%;}
.icon_right{ width:0.8em; position: absolute; right: 0; top: 40%;}
.pocky.keep{ opacity: 1 !important;}

#page1.cur .pockys{-webkit-animation:pocky_ce 1s 0s linear both;}
@-webkit-keyframes pocky_ce{
0%{ -webkit-transform:translateX(0)}
100%{ -webkit-transform:translateX(-300px)}
}

#page1.cur .pocky{-webkit-animation:pocky_big 1s 0s ease-in both;}
@-webkit-keyframes pocky_big{
0%{ -webkit-transform: scale(1);}
100%{ -webkit-transform: scale(0);}
}

#page1 .pocky.keep div{-webkit-animation:keep .3s 0s linear both;}
@-webkit-keyframes keep{
0%{-webkit-transform: rotate(0deg) scale(1)}
100%{ -webkit-transform: rotate(140deg) scale(1.5)}
}

#page1 .pocky.keep img{-webkit-animation:star 3s 0s linear both infinite;}
@-webkit-keyframes star{
0%{opacity:.3;}
10%{opacity:1;}
20%{opacity:.3;}
100%{opacity:.3;}
}


/*
#page1 .pocky.keep img{-webkit-animation:pocky 2s 0s linear both infinite;}
@-webkit-keyframes pocky{
0%{ -webkit-transform:translateY(-30px)}
50%{ -webkit-transform:translateY(0)}
100%{ -webkit-transform:translateY(-30px)}
}
#page1.cur .people{-webkit-animation:people_ce 1s 0s linear both;}
@-webkit-keyframes people_ce{
0%{ -webkit-transform:translateX(0);}
100%{ -webkit-transform:translateX(300px) rotate(-10deg);}
}

*/


#page2{ width:100%; height: 100%; position:absolute; left: 0; top: 0; display: none;}
.show{ width:100%; height: 100%; position: absolute; left: 0; top: 0; display: none;}
.show img{ height: 100%;}
.page2_text{ width:1em; position: absolute; right: 0.18em; top: 0;}
.page2_text img{ display:none;}
.page2_text img:first-child{ display:block;}



.btn{ width:4.34em; position: absolute; left: 44%; bottom: 9%; margin-left: -1.67em;}

/*
#page2 .page2_text{-webkit-animation:bottoms 1s 0s ease both;}
*/

#huabu{ width:100%; height: 100%; position: absolute; left: 0; top: 0;}


.pocky_footer{ width:100%; position: absolute; left: 0; bottom: 0;}
.pocky_footer img{ display:none;}
.pocky_footer img:first-child{ display:block;}

.pocky_btn1{ width:3.53em; position: absolute; left: 0.28em; bottom: 12%;}
.pocky_btn2{ width:3.53em; position: absolute; right: 0.28em; bottom: 12%;}





/*
#page2{ width:100%; height: 100%; position:absolute; left: 0; top: 0; display: none; z-index: 2;}
.kuang_div{ width:100%; height: 100%; position: relative;}
.show{ width:100%; height: 100%; position: absolute; left: 0; top: 0;}
.show img{ height:100%;}

#huabu{ width:750px; height: 1218px; position: absolute; left: 0; top: 0; opacity: 0;}


#page1 .page1_slogan{-webkit-animation:pulse 1s 0s ease both;}
#page1 .page1_img{-webkit-animation:topUp 1s 0.5s ease both;}
#page1 .ceshi{-webkit-animation:topUp 1s 1s ease both;}

#page1 .page1_icon1{-webkit-animation:earth 1s 0s linear both infinite;}
#page1 .page1_icon2{-webkit-animation:earth 1s 0s linear both infinite;}


@-webkit-keyframes earth{
0%{-webkit-transform: rotate(-10deg);}
50%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform:rotate(-10deg);}
}

*/


.alerts{ width:100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(255,255,255,0.2); display: none;}
.alerts dl{ width:72%; position: absolute; left: 14%; top: 35%; background: #fff; border-radius: 0.2em; overflow: hidden;}
.alerts dt{ padding:0.3em 0;}
.alerts dt span{ font-size:0.32em; text-align: center; line-height: 1.4em; padding: 0.2em 0; display: block; font-weight: bold;}
.alerts dt p{ font-size:.26em; color: #050505; padding: 0.3em 1em;}
.alerts dd{ font-size:.26em; color: #050505; border-top: 1px solid #ccccca; text-align: center;}
.alerts dd a{ color:#1e7acf; display: block; padding: 1em;}

@-webkit-keyframes lefts{
0%{ opacity:0; -webkit-transform:translateX(600px)}
100%{opacity:1; -webkit-transform:translateX(0)}
}

@-webkit-keyframes rights{
0%{ opacity:0; -webkit-transform:translateX(-600px)}
100%{opacity:1; -webkit-transform:translateX(0)}
}

@-webkit-keyframes leftsp{
0%{ opacity:0; -webkit-transform:translateX(60px)}
100%{opacity:1; -webkit-transform:translateX(0)}
}

@-webkit-keyframes rightsp{
0%{ opacity:0; -webkit-transform:translateX(-60px)}
100%{opacity:1; -webkit-transform:translateX(0)}
}

@-webkit-keyframes bottUp{
0%{opacity:0; -webkit-transform:translateY(-0.5em)}
100%{opacity:1;-webkit-transform:translateY(0)}
}

@-webkit-keyframes bottoms{
0%{opacity:0; -webkit-transform:translateY(-400px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}


@-webkit-keyframes topUp{
0%{opacity:0; -webkit-transform:translateY(600px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}


@-webkit-keyframes topfade{
0%{opacity:0; -webkit-transform:translateY(0px)}
50%{opacity:1;}
100%{opacity:0;-webkit-transform:translateY(-100px)}
}




@-webkit-keyframes pulse{
0%{opacity:0;-webkit-transform:scale(.3)}
50%{opacity:1;-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1);}
}

@-webkit-keyframes quan{
0%{opacity:0;-webkit-transform:scale(.5)}
50%{opacity:1;}
100%{opacity:0;-webkit-transform:scale(1.5);}
}


@-webkit-keyframes leftp{
0%{opacity:0; -webkit-transform:translateX(2000px)}
60%{opacity:1; -webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}

@-webkit-keyframes bottomp{
0%{opacity:0; -webkit-transform:translateY(40px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}


@-webkit-keyframes shows{
0%{opacity:0;}
100%{opacity:1;}
}








